import React from 'react';
import { Toast, } from 'antd-mobile';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            type: 9,
            menu: [{
                title: '全部',
                id: 9,
            },{
                title: '待付款',
                id: 0,
            },{
                title: '已完成',
                id: 1,
            }],
			hasMore: true,
			data:[],
			action: STATS.init,
			page: 1,
        }
    }
	componentDidMount(){
        document.title = '我的订单'
        this.getList()
	}
	changeType(type){
		this.setState({
			type
		},()=>{
            this.getList()
        })
	}
	getList(){
		var req={
            page: 1,
			size: 12,
			type: this.state.type,
        }
        global.Ajax.hhtc_request("order/order_list",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					// hasMore=false
                }
                console.log()
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
			type: this.state.type,
        }
        global.Ajax.hhtc_request("order/order_list",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
			type: this.state.type
        }
        global.Ajax.hhtc_request("order/order_list",req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className='' style={{background: '#F5F5F5',}}>
                <div className='learn_tab learn_tab1' style={{position: 'fixed',left: 0,top: 0,right: 0,zIndex: 9,}}>
                    {this.state.menu.map((item,index)=>{
                        return(
                            <p key={'menu'+index} className={this.state.type===item.id?'active':''} onClick={this.changeType.bind(this,item.id)}>{item.title}</p>
                        )
                    })}
                </div>
                <ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction.bind(this)}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
					<div className='orderlist'>
						{this.state.data.map((item,index)=>{
							return(
								<div key={'list'+index} className='item'>
									<div className='top'>
                                        <p className='time'>{item.atime}</p>
                                        {item.pay_status===0&&<p className='status redz'>待支付</p>}
                                        {item.pay_status===1&&<p className='status lvz'>交易完成</p>}
                                        {item.pay_status===2&&<p className='status'>已关闭</p>}
                                    </div>
                                    <div className='index_lj_list'>
                                        <div className='item' onClick={()=>{this.props.history.push('/page/home/user/orderdetail/'+item.id)}}>
                                            <div className='picbox'>
                                                <img alt='' src={item.img} className='pic' />
                                                {item.type===1?<p className='bq1'>视频</p>:<p className='bq1'>音频</p>}                                                
                                            </div>
                                            <div className='right'>
                                                <p className='title'>{item.title}</p>
                                                <p className='desc'>{item.info}</p>
                                                <p className='peop'>{item.author}</p>
                                                <div className='flex'>
                                                    <p className='pri'>{item.money*1}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='btnbox'>
                                        {item.pay_status===0&&<p className='p1' onClick={()=>{this.props.history.push('/page/home/learn/pay/'+item.id+'/1')}}>立即支付</p>}
                                        {item.pay_status===2&&<p className='p2' onClick={()=>{this.props.history.push('/page/home/learn/Order/'+item.pid+'/2')}}>重新购买</p>}
                                    </div>
								</div>
							)
						})}
					</div>
				</ReactPullLoad>
                {/* <div className='orderlist'>
                    <div className='item'>
                        <div className='top'>
                            <p className='time'>2020-01-21 11:00:00</p>
                            <p className='status redz'>待支付</p>
                        </div>
                        <div className='index_lj_list'>
                            <div className='item' onClick={()=>{this.props.history.push('/page/home/user/orderdetail')}}>
                                <div className='picbox'>
                                    <img alt='' src={require('../../imgs/pic1.png')} className='pic' />
                                    <p className='bq1'>视频</p>
                                </div>
                                <div className='right'>
                                    <p className='title'>创始人IP变现的3大方向5大形式（下半场）</p>
                                    <p className='desc'>幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三</p>
                                    <p className='peop'>唐玉</p>
                                    <div className='flex'>
                                        <p className='pri'>￥13.98</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='btnbox'>
                            <p className='p1'>立即支付</p>
                        </div>
                    </div>
                    <div className='item'>
                        <div className='top'>
                            <p className='time'>2020-01-21 11:00:00</p>
                            <p className='status'>已关闭</p>
                        </div>
                        <div className='index_lj_list'>
                            <div className='item' onClick={()=>{this.props.history.push('/page/home/user/orderdetail')}}>
                                <div className='picbox'>
                                    <img alt='' src={require('../../imgs/pic1.png')} className='pic' />
                                    <p className='bq1'>视频</p>
                                </div>
                                <div className='right'>
                                    <p className='title'>创始人IP变现的3大方向5大形式（下半场）</p>
                                    <p className='desc'>幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三</p>
                                    <p className='peop'>唐玉</p>
                                    <div className='flex'>
                                        <p className='pri'>￥13.98</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='btnbox'>
                            <p className='p2'>重新购买</p>
                        </div>
                    </div>
                    <div className='item'>
                        <div className='top'>
                            <p className='time'>2020-01-21 11:00:00</p>
                            <p className='status lvz'>交易完成</p>
                        </div>
                        <div className='index_lj_list'>
                            <div className='item' onClick={()=>{this.props.history.push('/page/home/user/orderdetail')}}>
                                <div className='picbox'>
                                    <img alt='' src={require('../../imgs/pic1.png')} className='pic' />
                                    <p className='bq1'>视频</p>
                                </div>
                                <div className='right'>
                                    <p className='title'>创始人IP变现的3大方向5大形式（下半场）</p>
                                    <p className='desc'>幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三幸幸苦苦打造IP，却不知道如何用来赚钱？详解IP变现的三大方向和成交的三</p>
                                    <p className='peop'>唐玉</p>
                                    <div className='flex'>
                                        <p className='pri'>￥13.98</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> */}
			</div>
		)
	}
}
